@extends('layouts.admin.base')
@section('title', '用户管理')
@section('style')
    <style>
    .layui-form-checkbox > span{
        width:90px;
    }
    #Dialoge{
        padding-top: 20px;
        display: none;
        text-align: center;
    }
    .layui-form-checked span, .layui-form-checked:hover span {
        background-color: #1E9FFF;
    }
    .layui-form-checked i, .layui-form-checked:hover i {
        color: #1E9FFF;
    }
    .layui-form-onswitch.layui-checkbox-disabled em {
        color: #ffffff!important;
    }

    </style>
@endsection
@section('content')
    <div id="content">
        <div class="layui-card" >
            <!-- 导航区域 -->
            <div class="layui-card-body">
               <span class="layui-breadcrumb" style="padding: 20px 10px">
                  <a href="javascript:void(0)">系统管理</a>
                  <a><cite>用户管理</cite></a>
               </span>
            </div>
        </div>
        <div class="show-area">
            <form id="qryForm"  class="layui-form" action="" btnPermission="600101">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="user_name" placeholder="输入姓名检索" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="user_id" placeholder="输入账号检索" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="school" placeholder="输入学校检索" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <button type="button" class="pear-btn pear-btn-lg pear-btn-primary" lay-submit lay-filter="queryBtn">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <select name="gender" class="layui-form-select">
                                <option value="">性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <select name="role_id" lay-filter="rolelist" data-role="rolelist" class="layui-form-select">
                                <option value="">角色</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <select name="active_flag">
                                <option value="">状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <button type="reset" class="pear-btn pear-btn-lg">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>

                </div>
            </form>
            <table class="layui-hide" id="tablelsit" lay-filter="tablelsit" lay-data="{id: 'tablelsit'}"></table>
            <div class="pagebarbox right-align"><div id="pageBar" class="pagebar"></div></div>

            <script type="text/html" id="user_status">
                <div class="layui-btn-container">
                    <input type="checkbox" name="active_flag" data-id="@{{ d.id }}" lay-filter="setStatus" lay-skin="switch" lay-text="启用|禁用" disabled @{{# if(d.active_flag == '1'){ }} checked @{{#  }  }}>
                </div>
            </script>
            <script type="text/html" id="opDemo">
                <a href="javascript:void (0)" class="tableop" lay-event="setRole" btnPermission="600102">设置角色</a>
            </script>

        </div>
    </div>
    <!--设置角色弹窗-->
    <div id="Dialoge" class="dialogue">
        <form class="layui-form" action="" id="editForm" lay-filter="editForm">
            <div class="layui-form-item">
                <div class="layui-row" id="rolelist"></div>
            </div>
            <input type="hidden" name="user_id" id="userid" value="">
            <div style="text-align: center; clear: both;padding-top: 20px">
                <button class="pear-btn pear-btn-lg pear-btn-primary" lay-submit lay-filter="setRole">提交</button>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        var totalNUm = 0;
        var table;
        var form;
        var laypage;
        var layer;
        var filters = '';
        var addLayer;
        var editLayer;
        var id = '';
        var util;
        var laytpl;
        var rolelist;
        var curr_page = 1;
        var element;
        var per_page = 10;
        var $ = layui.jquery;

        layui.use(['table', 'form', 'element', 'laypage','util','laytpl'], function() {
                table = layui.table;
                element = layui.element;
                form = layui.form;
                laypage = layui.laypage;
                layer = layui.layer;
                util = layui.util;
                laytpl = layui.laytpl;



                getList(1,per_page);

                // 设置用户角色提交
                form.on('submit(setRole)', function(data) {
                    var data = data.field;
                    var param = {
                        "id" : data.user_id,
                    };
                    delete data['user_id']
                    var arr = [];
                    for (var item in data){
                        arr.push(data[item]);
                    }
                    param.roleid = arr;
                    setUserRole(param,function (res) {
                        if(res.code === 1) {
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 6
                            });
                            getList(curr_page,per_page);
                        } else {
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                        }
                        layer.close(editLayer);
                    })

                    return false;
                });

                // 搜索查询
                form.on('submit(queryBtn)', function(data) {
                    var param = data.field;
                    filters = param
                    getList(1,per_page)
                });
                // 重置
                form.on('submit(resetBtn)', function(data) {
                    filters = {};
                    $('#qryForm')[0].reset();
                    getList(1,per_page)
                });

                table.on('tool(tablelsit)', function(obj) {
                    var data = obj.data;
                    id = data.id;

                    if(obj.event === 'setRole') { //设置角色弹窗
                        layer.ready(function() {
                            var index = layer.load(2);
                            editLayer = layer.open({
                                type: 1,
                                title: "设置角色",
                                content: $('#Dialoge'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                                area: ['640px', '280px'],
                                cancel: function() {
                                    //右上角关闭回调
                                    $('#editForm')[0].reset()
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                            layer.close(index);
                        });
                        //获取编辑的值
                        var roleids = data.role_id;
                        if (!roleids) roleids = '';
                        $('#rolelist').empty();
                        for(var i=0; i<rolelist.length;i++) {
                            if(roleids && roleids.indexOf(rolelist[i].id) != -1 ){
                                $('#rolelist').append('<div class="layui-input-inline"><input type="checkbox" checked name="roles[]" title="'+rolelist[i].rolename+'" value="'+rolelist[i].id+'"></div>');
                            }else{
                                $('#rolelist').append('<div class="layui-input-inline"><input type="checkbox" name="roles[]" title="'+rolelist[i].rolename+'" value="'+rolelist[i].id+'"></div>');
                            }
                        }
                        $('#userid').val(id);
                        form.render('checkbox');

                    }
                });

                form.on('switch(setStatus)',function (elem) {
                    let checked = elem.elem.checked;

                    let active_flag = '2';
                    if (checked){
                        active_flag = '1';
                    }
                    let user_id = $(elem.elem).attr('data-id');
                    setUserStatus({"status":active_flag,"id":user_id},function (res) {
                        if (res.code === 1){
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 6
                            });
                            getList(curr_page,per_page);
                        }else{
                            layer.msg(res.msg, {
                                time: 2000,
                                icon: 5
                            });
                            $(elem.elem).prop('checked',false);
                            form.render();
                        }
                    })
                });
            });

        // 获取页面数据
        function getList(page,limit) {

            if (filters == ''){
                filters = {}
            }
            var para = {
                "page": page,
                "filters": filters,
                "limit": limit
            };
            getUserList(para, function(res){
                if(res.code === 1) {
                    if(totalNUm != res.total) {
                        totalNUm = res.total;
                        per_page = res.limit;
                        renderPageBar(page,per_page)
                    }
                    renderSelect();

                    table.render({
                        data: res.data,
                        elem: '#tablelsit',
                        limit: res.limit,
                        skin: 'row',
                        cols: [[
                            {field: 'id', title: '序号',templet: function(d) {
                                    return (page-1)*res.limit+d.LAY_INDEX;
                                },width:'6%',align:'center'},
                            {field: 'user_id', title: '账号', width: '12%', align: 'center'},
                            {field: 'user_name', title: '姓名', width: '12%', align: 'center'},
                            {field: 'gender', title: '性别', width: '10%', align: 'center'},
                            {field: 'school', title: '学校', width: '18%', align: 'center'},
                            {field: 'rolename', title: '角色', width: '18%', align: 'center'},
                            { title: '状态', width: '12%', align: 'center',toolbar: '#user_status'},
                            {title: '操作', align: 'center', toolbar: '#opDemo'}
                        ]],
                        id:"tableIns",
                        done: function(res, curr, count) {
                            // setBtnPermission();
                            curr_page = page;
                        },
                        page: false,
                        loading: true
                    });
                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    });
                }
            });

        }

        // 渲染页面
        function renderPageBar(page,limit) {
            laypage.render({
                elem: 'pageBar',
                count: totalNUm, //数据总数，从服务端得到
                curr: page,
                first: '第一页',
                last: '最后一页',
                limit:limit,
                layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
                jump: function(obj, first) {
                    //首次不执行
                    if(!first) {
                        layer.closeAll();
                        getList(obj.curr,obj.limit)
                    }
                }
            });
        }



        function renderSelect() {
            getAllRoles(null,function (res) {
                if(res.code === 1){
                    rolelist = res.data;
                    if(rolelist.length>0){
                        for(var i=0; i<rolelist.length;i++) {
                            $('[data-role="rolelist"]').append('<option value="'+rolelist[i].id+'">'+rolelist[i].rolename+'</option>');
                        }
                    }
                    form.render('select');
                }
            })
        }

    </script>
@endsection
